Avoid acccessing React internals from use-sync-external-store/shim
#29868
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Prior to this change, the build process would replace `console.error` with an `error` call that then again would call `printWarning`, which accesses `React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` in current stable versions (see https://unpkg.com/browse/[email protected]/cjs/use-sync-external-store-shim.development.js) and `React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` in future versions (see https://unpkg.com/browse/[email protected]/cjs/use-sync-external-store-shim.development.js). This might cause builds to fail. With this change, that replacement is avoided and a normal `console.error` call is made instead.
|
@phryneas is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
eps1lon
reviewed
Jun 12, 2024
There was a problem hiding this comment.
You can add a test to packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js for the warning by extracting the necessary code from https://codesandbox.io/p/sandbox/react-19-uses-old-react-vl547c?file=%2Fsrc%2Findex.js%3A11%2C43
eps1lon
reviewed
Jun 12, 2024
|
I believe just changing the existing test to "should never include a stack trace" should test for this sufficiently - I'm not sure how to run the tests with different flags, though. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
phryneas
commented
Jun 12, 2024
packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
Outdated
Show resolved
Hide resolved
|
Thank you for walking me through this! |
github-actions bot
pushed a commit
that referenced
this pull request
Jun 12, 2024
…29868) Co-authored-by: eps1lon <[email protected]> DiffTrain build for [50e89ec](50e89ec)
This was referenced Jul 25, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #29854
Summary
Prior to this change, the build process or
use-sync-external-storewould replaceconsole.errorwithan
errorcall that then again would callprintWarning, which accessesReact.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIREDin current stableversions (see https://unpkg.com/browse/[email protected]/cjs/use-sync-external-store-shim.development.js)
and
React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADEin future versions(see https://unpkg.com/browse/[email protected]/cjs/use-sync-external-store-shim.development.js).
This might cause builds to fail, as there would be no version of the package that is compatible with both React 18 and 19.
With this change, that replacement is avoided and a normal
console.errorcall is made instead.
How did you test this change?
I verified by locally building this locally with
yarn build use-sync-external-storeand looking at the build output atbuild/oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store-shim.development.js.